<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="500px" height="500px" style="border: 1px solid #ccc;"></canvas>
	<canvas id="mycanvas2" width="500px" height="500px" style="border: 1px solid #ccc;"></canvas>
	<canvas id="mycanvas3" width="500px" height="500px" style="border: 1px solid #ccc;"></canvas>
	<canvas id="mycanvas4" width="500px" height="500px" style="border: 1px solid #ccc;"></canvas>
	<canvas id="mycanvas5" width="500px" height="500px" style="border: 1px solid #ccc;"></canvas>
	<canvas id="mycanvas6" width="500px" height="500px" style="border: 1px solid #ccc;"></canvas>
	<canvas id="mycanvas7" width="500px" height="500px" style="border: 1px solid #ccc;"></canvas>
	<canvas id="mycanvas8" width="500px" height="500px" style="border: 1px solid #ccc;"></canvas>
	<canvas id="mycanvas9" width="500px" height="500px" style="border: 1px solid #ccc;"></canvas>
</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas');
	var context = canvas.getContext("2d");
//旋转的是坐标系，而不是矩形，参数为弧度
	context.rotate(20*Math.PI/180);
	context.fillRect(50,20,100,50)
</script>

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas2');
	var context = canvas.getContext("2d");
	context.fillRect(10,10,100,50);
//坐标系的平移，沿x,y轴方向平移
	context.translate(70,70)
	context.fillRect(10,10,100,50)
</script>

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas3');
	var context = canvas.getContext("2d");
	context.fillStyle="red"
	context.fillRect(0,0,250,100)
//横坐标（横向）是否缩放，横坐标是否倾斜（水平旋转角，弧度），纵坐标是否倾斜，纵坐标是否缩放，水平平移，垂直平移（第二个参数和第三个参数之和的绝对值为0）
	context.transform(1,0.5,-0.5,1,30,10)
	context.fillStyle="blue"
	context.fillRect(0,0,250,100)
	context.transform(1,0.5,-0.5,1,30,10)
	context.fillStyle="yellow"
	context.fillRect(0,0,250,100)
</script>

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas4');
	var context = canvas.getContext("2d");
	context.fillStyle = "#eeeeef"
	context.fillRect(0,0,500,500)
	context.translate(200,50)
	context.fillStyle = "rgba(255,0,0,0.25)"
	for (var i=1; i <=30; i++) {
		context.translate(25,25);
		context.scale(0.95,0.95);
		context.rotate(Math.PI/10);
		context.fillRect(0,0,100,50)
	}
</script>

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas5');
	var context = canvas.getContext("2d");
	context.fillStyle = "blue";
	context.fillRect(10,10,50,50);
// source-in:只展示重叠部分,source-atop:保留了最底层的图像与其他图形的重叠部分，source-over为默认值（保留重叠），source-out:保留了最外层的图像与其他图形的重叠部分
// destination-atop:图像的覆盖顺序改变（原来底层的图形移动至顶层）
	context.globalCompositeOperation = "source-out";
	context.fillStyle = "red";
	context.arc(50,50,30,0,2*Math.PI);
	context.fill()
</script>

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas6');
	var context = canvas.getContext("2d");
// offsetX:阴影沿x方向偏移20，当值为0时阴影在正下方; Blur:阴影模糊程度（模糊系数）,值越大，模糊度越大，即约不清晰
	context.shadowBlur = 10;
	context.shadowOffsetX = 20;
	context.shadowOffsetY = 20;
	context.shadowColor = "pink";
	context.fillStyle = "red";
	context.fillRect(20,20,100,80)
</script>

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas7');
	var context = canvas.getContext("2d");
	draw5star(context);
//封装
	function draw5star(context) {
		var dx = 100;
		var dy = 100;
		var s = 50;
		context.beginPath()
		context.fillStyle = "rgba(100,100,100,0.5)";
	//一个圆的周长是2PI，
		var dig = Math.PI/5*4;
		for (var i=1; i<=5; i++) {
			var x = Math.sin(i*dig)
			var y = Math.cos(i*dig)
			context.lineTo(dx+x*s,dy+y*s)
		}
		context.fill()
		context.closePath()
	}
</script>

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas8');
	var context = canvas.getContext("2d");
	context.fillStyle = "#eeeeef";
	context.fillRect(0,0,500,500);
	context.shadowBlur = 3.5;
	context.shadowOffsetX = 30;
	context.shadowOffsetY = 20;
	context.shadowColor = "rgba(100,100,100,0.25)";
	context.translate(0,50)
	for (var i=1; i<=3; i++) {
		context.translate(100,100)
		draw5star(context)
	}
</script>

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas9');
	var context = canvas.getContext("2d");
// fillText(text,x,y,maxWidth) 参数:文本，开始绘图的x坐标，y坐标，最大文本昆都（可选）
	context.font = "20px Georgia"
	context.fillText("print(0o1010) + eling",10,50);
	context.font = "20px Verdana";
	var g1 = context.createLinearGradient(0,0,300,0)
	g1.addColorStop(0,"magenta");
	g1.addColorStop(0.5,"blue");
	g1.addColorStop(1.0,"red")
	context.fillStyle = g1
	context.fillText("520 eling",10,90)
</script>